<script setup>
import commonDescription from './commonDescription.vue';
const emit = defineEmits(['closeDrawer'])
const props = defineProps({
  descriptionData: {
    type: Array,
    default: []
  },
  descriptionHeader: {
    type: Object,
    default: {}
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const visible = computed(() => props.visible)

const descriptionData = computed(() => {
  return props.descriptionData.map(item => {
    return [
      {
        $attrs: {
          label: '任务名称'
        },
        value: item.taskName,
      },
      {
        $attrs: {
          label: '处理人昵称'
        },
        value: item.assigneeName,
      },
      {
        $attrs: {
          label: '完成日期时间'
        },
        value: item.finishTime,
      },
      {
        $attrs: {
          label: '花费时间'
        },
        value: item.duration,
      },
      {
        $attrs: {
          label: '审批意见'
        },
        value: item.comment,
      }
    ]
  })
})
const descriptionHeader = computed(() => props.descriptionHeader)

const handleClose = () => {
  emit('closeDrawer')
}
</script>

<template>
  <div>
    <el-drawer v-model="visible" title="流程流转信息" direction="ltr" :close-on-click-modal="false"
      :close-on-press-escape="false" :destroy-on-close="true" :show-close="true" size="30%" @close="handleClose">
      <div class="drawer-body">
        <div class="common-desription" v-for="(item, index) in descriptionData" :key="item.id">
          <el-card>
            <commonDescription :descriptionData="item" :descriptionHeader="descriptionHeader"></commonDescription>
          </el-card>
          <div class="down-arrow" v-if="index !== descriptionData.length - 1">
            <el-icon :size="40" color="#af96ff">
              <ArrowDownBold />
            </el-icon>
          </div>
        </div>

      </div>
    </el-drawer>
  </div>
</template>


<style lang="scss" scoped>
.down-arrow {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

:deep(.el-drawer__header) {
  margin: 0;
  text-align: center;
  font-weight: 700;

  .el-drawer__title {
    font-size: 22px;

  }
}
</style>